<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单对齐示例</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            /* 防止尺寸计算差异 */
        }

        body {
            width: 100%;
            display: flex;
            justify-content: center;
            padding: 20px;
        }

        .box {
            width: 500px;
        }

        .name-input,
        .message-input,
        .button-input {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
        }

        .button-input {
            justify-content: center;
        }

        .button-input button {
            width: 150px;
            padding: 20px;
            font-size: 20px;
            font-weight: 800;

        }

        .name-input label,
        .message-input label {
            width: 80px;
        }

        input,
        textarea {
            width: 300px;
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }

        textarea {
            height: 100px;
        }

        .border-box {
            margin-top: 20px;
            width: 500px;
            border-bottom: 1px solid gray;
        }
        .list-box{
            list-style: none;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="name-input">
            <label for="username">姓名：</label>
            <input type="text" id="username" name="username">
        </div>
        <div class="message-input">
            <label for="message">留言区：</label>
            <textarea id="message" name="message"></textarea>
        </div>
        <div class="button-input">
            <button>提交</button>
        </div>
        <div class="border-box"></div>

        <div class="show-message">
            <ul class="list-box">

            </ul>
        </div>
    </div>

</body>
<script>
    document.querySelector('.button-input button').onclick = function () {
        var username = document.getElementById('username').value;
        var text = document.getElementById('message').value;

        var li = document.createElement('li');
        li.innerHTML=`
        <div class='message-item'>
            <span class='user'>${username}说</span>
            <span class='content'>${text}</span>
        </div>
        `
        document.querySelector('.list-box').append(li);
    }

</script>

</html>